<template>
  <nav class="navbar">
    <!-- 左侧Logo和品牌名 -->
    <div class="navbar-left">
      <router-link to="/" class="brand">
        <img src="@/assets/logo.svg" alt="Logo" class="logo" />
        <span class="brand-name">非遗传承</span>
      </router-link>
    </div>

    <!-- 中间导航菜单 -->
    <div class="navbar-center">
      <el-menu 
        mode="horizontal" 
        :router="true"
        :default-active="activeMenu"
        :ellipsis="false"
        class="nav-menu"
      >
        <!-- 非遗项目 -->
        <el-sub-menu index="heritage">
          <template #title>
            <el-icon><Collection /></el-icon>
            非遗项目
          </template>
          <el-menu-item index="/heritage/list?type=paper">
            <el-icon><Scissors /></el-icon>剪纸艺术
          </el-menu-item>
          <el-menu-item index="/heritage/list?type=ceramic">
            <el-icon><Cup /></el-icon>陶瓷工艺
          </el-menu-item>
          <el-menu-item index="/heritage/map">
            <el-icon><Location /></el-icon>地区分布
          </el-menu-item>
          <el-menu-item index="/heritage/search">
            <el-icon><Search /></el-icon>搜索
          </el-menu-item>
        </el-sub-menu>

        <!-- 传承人 -->
        <el-sub-menu index="masters">
          <template #title>
            <el-icon><User /></el-icon>
            传承人
          </template>
          <el-menu-item index="/masters">
            <el-icon><List /></el-icon>大师名录
          </el-menu-item>
          <el-menu-item index="/stories">
            <el-icon><Document /></el-icon>传承故事
          </el-menu-item>
          <el-menu-item index="/feedback">
            <el-icon><ChatDotRound /></el-icon>在线留言
          </el-menu-item>
        </el-sub-menu>

        <!-- 活动资讯 -->
        <el-sub-menu index="events">
          <template #title>
            活动资讯
          </template>
          <el-menu-item index="/events">
            <el-icon><Bell /></el-icon>近期活动
          </el-menu-item>
          <el-menu-item index="/history">
            <el-icon><Timer /></el-icon>历史回顾
          </el-menu-item>
          <el-menu-item index="/register">
            <el-icon><Edit /></el-icon>活动报名
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <!-- 右侧用户区域 -->
    <div class="navbar-right">
      <!-- 搜索框 -->
      <div class="search-box">
        <el-input
          v-model="searchQuery"
          placeholder="搜索非遗项目..."
          :prefix-icon="Search"
          @keyup.enter="handleSearch"
          clearable
          class="custom-search-input"
        >
          <template #append>
            <el-button @click="handleSearch" class="custom-search-button">搜索</el-button>
          </template>
        </el-input>
      </div>

      <!-- 用户菜单 -->
      <el-dropdown v-if="isLogin" trigger="click" @command="handleCommand">
        <div class="user-info">
          <el-avatar 
            :size="32" 
            :src="authStore.userAvatar || defaultUserAvatar" 
            @error="() => true"
          />
          <span class="username">{{ authStore.currentUser?.username }}</span>
          <el-icon><ArrowDown /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">
              <el-icon><User /></el-icon>个人中心
            </el-dropdown-item>
            <el-dropdown-item command="favorites">
              <el-icon><Star /></el-icon>我的收藏
            </el-dropdown-item>
            <el-dropdown-item command="feedback">
              <el-icon><ChatDotRound /></el-icon>意见反馈
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              <el-icon><SwitchButton /></el-icon>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <!-- 未登录状态 -->
      <div v-else class="auth-buttons">
        <el-button type="text" @click="handleLogin">登录</el-button>
        <el-button type="primary" @click="handleRegister">注册</el-button>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '../stores/authStore'
import defaultUserAvatar from '@/assets/images/default_user_avatar.jpg'
import {
  Collection,
  Scissors,
  Cup,
  Location,
  Search,
  User,
  List,
  Document,
  ChatDotRound,
  Calendar,
  Bell,
  Timer,
  Edit,
  Star,
  SwitchButton,
  ArrowDown
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()
const searchQuery = ref('')
const activeMenu = computed(() => route.path)

// 计算属性：登录状态
const isLogin = computed(() => authStore.isAuthenticated)

// 处理搜索
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    router.push({
      path: '/heritage/search',
      query: { q: searchQuery.value }
    })
  } else {
    ElMessage.warning('请输入搜索关键词')
  }
}

// 处理用户菜单命令
const handleCommand = async (command) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'favorites':
      router.push('/favorites')
      break
    case 'feedback':
      router.push('/feedback')
      break
    case 'logout':
      try {
        authStore.logout()
        router.push('/login')
        ElMessage.success('已成功退出登录')
      } catch (error) {
        ElMessage.error('退出登录失败')
      }
      break
  }
}

// 处理登录
const handleLogin = () => {
  router.push('/login')
}

// 处理注册
const handleRegister = () => {
  router.push('/register')
}
</script>

<style scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 1000;
  will-change: transform; /* 优化性能 */
}

.navbar-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.navbar-center {
  flex: 10 1 auto; /* Super high grow priority to take all available space */
  display: flex;
  justify-content: center;
  min-width: 0;
  overflow: visible; /* Ensure content is not clipped */
}

.navbar-right {
  flex: 0 1 180px; /* Allow to shrink down to 180px, has a preferred size */
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.search-box {
  width: 400px;
  margin-right: 16px;
  flex-shrink: 1;
}

/* Overall container for input and append button, unifying the style */
.search-box :deep(.el-input-group) {
  border: 1px solid #dfe1e6; /* Overall border for the entire search bar */
  border-radius: 20px; /* Overall rounded corners */
  overflow: hidden; /* Crucial for clipping the button to the overall border-radius */
  transition: all 0.3s ease; /* Smooth transition for focus effect */
  background-color: #fff; /* White background for the entire bar */
  display: flex; /* Ensure input and button are aligned */
  align-items: stretch; /* Stretch children to fill height */
  position: relative; /* Crucial for absolute positioning of the append */
}

/* Focus state for the entire search bar when any internal element is focused */
.search-box :deep(.el-input-group:focus-within) {
  border-color: #409EFF; /* Blue border on focus */
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); /* Soft blue glow on focus */
}

/* Styling for the Element Plus Input wrapper - this is the left part of the combined unit */
.search-box :deep(.custom-search-input) .el-input__wrapper {
  background-color: transparent !important; /* Let parent background show (which is the overall white background) */
  box-shadow: none !important; /* Remove default shadow */
  border: none !important; /* Remove individual input border, border is on the group */
  border-radius: 20px !important; /* Fully rounded corners for the input field */
  padding: 1px 50px 1px 30px; /* Adjusted right padding to create space for the nested button + gap */
  height: 38px; /* Consistent height */
  flex-grow: 1; /* Allow input to take available space */
  transition: all 0.3s ease;
}

/* Focus state for the input wrapper (will be covered by el-input-group:focus-within) */
.search-box :deep(.custom-search-input) .el-input__wrapper.is-focus {
  border-color: transparent !important; /* Managed by parent group */
  box-shadow: none !important; /* Managed by parent group */
}

/* Input inner text color */
.search-box :deep(.custom-search-input) .el-input__inner {
  color: #333; /* Darker text color */
}

/* Prefix icon positioning and color, also applies to placeholder */
.search-box :deep(.custom-search-input) .el-input__prefix,
.search-box :deep(.custom-search-input) .el-input__inner::placeholder {
  left: 8px; /* Adjust icon position */
  color: #909399; /* Standard grey for icon and placeholder */
}

/* Suffix icon (clearable) positioning */
.search-box :deep(.custom-search-input) .el-input__suffix {
  right: 8px; /* Adjust clearable icon position */
}

/* Styling for the append container - remove its default styles, let button handle its own and position it */
.search-box :deep(.el-input-group__append) {
  background-color: transparent !important; /* Make transparent */
  border: none !important; /* Remove append container border */
  padding: 0 !important; /* Remove default padding */
  border-radius: 0 !important; /* Reset rounded corners */
  display: flex; /* Use flex to align button inside */
  align-items: center; /* Vertically center the button */
  position: absolute; /* Position absolutely within the el-input-group */
  right: 0; /* Align to the right edge of the el-input-group */
  top: 0; /* Align to the top edge */
  bottom: 0; /* Extend to the bottom edge */
  width: 38px; /* Make its width equal to button width */
  transform: translateX(0); /* Ensure no extra translation */
}

/* Styling for the custom search button */
.search-box :deep(.custom-search-button) {
  background: linear-gradient(135deg, #409EFF 0%, #36a3ff 100%); /* Blue gradient background */
  color: white; /* White text color */
  border: none; /* Remove button border */
  border-radius: 50%; /* Fully rounded for a perfect circle */
  width: 38px; /* Set width to match height for perfect circle */
  padding: 8px; /* Adjust padding for centered text/icon */
  font-weight: 500;
  transition: all 0.3s ease; /* Smooth transitions */
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2); /* Soft blue shadow */
  height: 38px; /* Match input height */
  display: flex; /* Use flex to center content */
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
  margin: 0; /* Remove all margins, positioning is handled by absolute positioning */
}

/* Hover effect for the custom search button */
.search-box :deep(.custom-search-button):hover {
  background: linear-gradient(135deg, #36a3ff 0%, #2d8cf0 100%); /* Darker gradient on hover */
  transform: translateY(-1px); /* Slight lift effect */
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3); /* Enhanced shadow on hover */
}

.auth-buttons {
  flex-shrink: 0;
}

.auth-buttons .el-button {
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.auth-buttons .el-button--text {
  color: #606266;
  padding: 8px 16px;
  border-radius: 20px;
}

.auth-buttons .el-button--text:hover {
  color: #409EFF;
  background-color: rgba(64, 158, 255, 0.1);
  transform: translateY(-1px);
}

.auth-buttons .el-button--primary {
  background: linear-gradient(135deg, #409EFF 0%, #36a3ff 100%);
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.2);
}

.auth-buttons .el-button--primary:hover {
  background: linear-gradient(135deg, #36a3ff 0%, #2d8cf0 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
}

/* 图标样式 */
.icon-heritage,
.icon-master,
.icon-event,
.icon-profile,
.icon-favorite,
.icon-feedback,
.icon-logout {
  @apply w-4 h-4 mr-1;
}

/* Optimize Element Plus menu style */
:deep(.el-menu) {
  border: none !important;
  background: transparent !important;
  white-space: nowrap;
  overflow: visible !important;
  width: 100%;
}

:deep(.el-menu--horizontal) {
  border-bottom: none !important;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  height: 60px !important;
  line-height: 60px !important;
  padding: 0 6px;
  white-space: nowrap;
}

/* Adjust navbar overall padding for more space */
.navbar {
  padding: 0 16px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .search-box {
    width: 140px;
  }
  .navbar-right {
    gap: 8px;
  }
}

@media (max-width: 992px) {
  .navbar {
    padding: 0 8px;
  }
  
  .search-box {
    width: 100px;
    margin-right: 4px;
  }
  
  .auth-buttons {
    gap: 4px;
  }
}

@media (max-width: 768px) {
  .navbar-center {
    display: none;
  }
  
  .search-box {
    width: 80px;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
}

.brand * {
  text-decoration: none !important;
}

.logo {
  height: 32px;
  width: 32px;
}

.brand-name {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  transition: color 0.3s ease;
}

.brand:hover .brand-name {
  color: #409EFF;
}

/* Deep selectors for maximum override */
:deep(.brand) {
  text-decoration: none !important;
}

:deep(.brand span) {
  text-decoration: none !important;
}

:deep(.navbar-left a) {
  text-decoration: none !important;
}

:deep(.navbar a) {
  text-decoration: none !important;
}
</style>